<template>
    <div class="strategy-container">
        <Tabs v-model:active="activeTab" title-active-color="#333333" title-inactive-color="#848484" :line-width="20" :line-height="4" class="tabs" @change="onActiveTab">
            <tab :name="1" title="社区场景">
                <div class="item">
                    <img v-if="optimal" src="@/assets/img/best-option.png" alt="">
                    <h1>您的投放策略</h1>
                    <div class="check-strategy">
                        {{ strategy.name }}
                    </div>
                    <h2>媒体分布及覆盖</h2>
                    <div class="flex total">
                        <div
                            v-for="item in tableData" :key="item.type" class="total-item"
                        >
                            <div class="key">
                                {{ item.name }}
                            </div>
                            <div class="value">
                                {{ $numberWithCommas(item.total) }}
                            </div>
                        </div>
                    </div>
                    <div v-if="strategy.mediaTypes?.length!>1" class="table">
                        <my-table :title-array="headData" :data="tdData"></my-table>
                    </div>
                    <h2>投放方式</h2>
                    <!-- <my-cell
            v-for="(item,index) in strategy.mediaTypes"
            :key="index"
            label-width="200px"
            :is-show-arrow="true" :label="showInfo.find((e)=>e.type===item)?.text" placeholder="请选择" :value="showInfo.find((e)=>e.type===item)?.modelValue?showInfo.find((e)=>e.type===item)?.modelValue:null" @click="onclick(item)"
        ></my-cell> -->
                    <my-cell
                        v-if="strategy.mediaTypes?.includes(1)"
                        label-width="200px"
                        :is-show-arrow="true"
                        label="智能屏: 时长频次" placeholder="请选择" :value="showPinValue" @click="onclick(1)"
                    ></my-cell>
                    <my-cell
                        v-if="strategy.mediaTypes?.includes(2)"
                        label-width="200px"
                        :is-show-arrow="true"
                        label="LCD: 时长频次" placeholder="请选择" :value="showLcdValue" @click="onclick(2)"
                    ></my-cell>
                    <my-cell
                        v-if="strategy.mediaTypes?.includes(3)"
                        class="frame-cell"
                        label-width="200px"
                        :is-show-arrow="false"
                        label="海报" placeholder="请选择" :value="showFramValue"
                    ></my-cell>
                </div>
            </tab>
            <tab :name="2" title="商务场景">
                <div class="expect">
                    <img src="@/assets/img/expect.png" alt="敬请期待">
                </div>
            </tab>
        </Tabs>
    </div>
    <FrequencySelecter :duration-frequency="[pinDuration, pinFrequency]" :formator-columns="formatorColums" :is-show="showFrequencyPickerPin" @close="showFrequencyPickerPin = false" @confirm="frequencyConfirmPin"></FrequencySelecter>
    <FrequencySelecter :duration-frequency="[lcdDuration, lcdFrequency]" :formator-columns="formatorColums" :is-show="showFrequencyPickerLcd" @close="showFrequencyPickerLcd = false" @confirm="frequencyConfirmLcd"></FrequencySelecter>
    <Picker title="投放方式" :is-show="putTypeShow" :columns="putTypeColumns" @close="putTypeShow = false" @confirm="putTypeConfirm"></Picker>
</template>

<script lang="ts" setup>
import { ref, PropType, watch, Ref } from 'vue';
import MyCell from '@/components/MyCell/index.vue';
import { StrategyItemModel } from '../../brandBreakout/breakout.module';
import myTable from '@/components/Table/index.vue';
import { CoverNumberItemModel } from '@/views/home/home.module';
import { getMediaNameByType } from '@/utils/filters';
import FrequencySelecter from '@/components/FrequencySelecter/index.vue';
import Picker from '@/components/DurationSelecter/index.vue';
import {Tab,Tabs } from 'vant';
import { onMounted } from 'vue';


const activeTab = ref(1); // 1:社区网 2：商务网


function formatorColums(cols:Ref<{values: string[],
    defaultIndex: number;}[]>){
    const timesCols = cols.value[0];
    timesCols.values = cols.value[0].values.filter((val)=>{
        return val === '5s' || val === '10s' || val === '15s';
    });
    cols.value[1].values = cols.value[1].values.filter((val)=>{
        return val === '300次';
    });
}


const emit = defineEmits(['changePin','changeLcd','changeFrame','onActiveTab']);
const showPinValue = ref('15秒300次');
const showFrequencyPickerPin = ref(false);
const pinDuration = ref(15);
const pinFrequency = ref(300);

function frequencyConfirmPin(value:string[]){
    showFrequencyPickerPin.value = false;
    const duration = value[0];
    pinDuration.value = +duration;
    const frequency = value[1];
    pinFrequency.value = +frequency;
    const durationFrequency = value.join('');
    showPinValue.value = durationFrequency;
    emit('changePin', { duration, frequency });
}

const showLcdValue = ref('15秒300次');
const showFrequencyPickerLcd = ref(false);
const lcdDuration = ref(15);
const lcdFrequency = ref(300);
function frequencyConfirmLcd(value:string[]){
    showFrequencyPickerLcd.value = false;
    const duration = value[0];
    const frequency = value[1];
    lcdDuration.value = +duration;
    lcdFrequency.value = +frequency;
    const durationFrequency = value.join('');
    showLcdValue.value = durationFrequency;
    emit('changeLcd', { duration, frequency });
}

const putTypeColumns = [
    {
        text: '一梯一框',
        value: 1,
    },
    {
        text: '一梯两框',
        value: 2,
    },
    {
        text: '包梯',
        value: 3,
    },
];
const showFramValue = ref(putTypeColumns[0].text);
const putTypeShow = ref(false);
function putTypeConfirm (value: { text: string, value: string | number }) {
    const framePublishMethod = value.value;
    const framePublishMethodLabel = value.text;
    showFramValue.value = framePublishMethodLabel;
    putTypeShow.value = false;
    emit('changeFrame', { framePublishMethod });
}

function resetSelect(){
    showFramValue.value = putTypeColumns[0].text;
    showLcdValue.value = '15秒300次';
    showPinValue.value = '15秒300次';
}
function onActiveTab(val:object){
    emit('onActiveTab',val);
}
// const showInfo = [
//     {
//         type: 1,
//         text: '智能屏: 时长频次 ',
//         modelValue: ref(showPinValue.value)
//     },
//     {
//         type: 2,
//         text: 'LCD: 时长频次 ',
//         modelValue: ref(showLcdValue.value)
//     },
//     {
//         type: 3,
//         text: '海报: 投放方式 ',
//         modelValue: showFramValue.value
//     }
// ];
defineExpose({
    resetSelect
});

const props = defineProps({
    optimal: {
        type: Boolean,
        require: true,
        default: false,
    },
    strategy: {
        type: Object as PropType<StrategyItemModel>,
        require: true,
        default: () => ({}),
    },
    formList: {
        type: Array as PropType<{ label: string; value: string }[]>,
        require: true,
        default: () => [],
    },
    tableData: {
        type: Array as PropType<CoverNumberItemModel[]>,
        require: true,
        default: () => [],
    },
});

const tdData = ref<{ col1: string, col2?: number, col3?: number, col4?: number }[]>([]);
const headData = ref<string[]>([]);

// const formlist = ;
// 处理表数据
const handleTableData = () => {
    tdData.value = [];
    headData.value = ['资源总览'];
    props.strategy?.mediaTypes?.forEach((type:number)=>{
        headData.value.push(getMediaNameByType(type));
    });
    props.tableData?.forEach((item: CoverNumberItemModel) => {
        const obj: { col1: string, col2?: number, col3?: number, col4?: number } = {col1: item.name};
        props.strategy?.mediaTypes?.forEach((type:number)=>{
            if(type===1){
                obj.col2 = item.screen;
            }else if(type===2){
                obj.col3 = item.lcd;
            }else{
                obj.col4 = item.poster;
            }
        });
        tdData.value.push(obj);
    });
};

function onclick(item : number){
    if(item === 1) {
        showFrequencyPickerPin.value = true;
    } else if(item === 2) {
        showFrequencyPickerLcd.value = true;
    } else if(item === 3){
        putTypeShow.value = true;
    }
}
watch(
    () => props.tableData,
    () => {
        handleTableData();
    },
    {
        deep: true,
    }
);

watch(
    () => props.strategy,
    () => {
        handleTableData();
    },
    {
        deep: true,
    }
);

onMounted(()=>{
    emit('onActiveTab',activeTab.value);
});

</script>

<style scoped lang="scss">
@import "@/styles/variables";

.strategy-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px 12px 0;
    margin-top: 12px;
    position: relative;

    img {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 50px;
        right: 12px;
    }

    .flex {
        display: flex;
    }

    h1 {
        height: 22px;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        margin-bottom: 8px;
    }

    h2 {
        height: 20px;
        font-weight: 600;
        font-size: 14px;
        color: #333333;
        margin-top: 16px;
    }

    .check-strategy {
        height: 20px;
        font-weight: 600;
        font-size: 14px;
        color: #e60044;
        margin-top: 8px;
    }

    .total {
        margin-top: 14px;
        justify-content: space-between;

        .total-item {
            text-align: center;
            position: relative;
            height: 47px;

            .key {
                font-weight: 400;
                font-size: 12px;
                height: 20px;
                line-height: 20px;
                color: #848484;
                letter-spacing: 0;
            }

            .value {
                margin-top: 2px;
                height: 19px;
                line-height: 19px;
                font-family: $spec_font;
                font-size: 16px;
                color: #333333;
                letter-spacing: 0;
            }
        }
    }

    .table {
        margin-top: 17px;
    }

    .cycle {
        display: flex;
        align-items: center;

        :deep(.van-cell) {
            padding: 13px 0;
        }

        span {
            display: inline-block;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #848484;
        }
    }
    .item {
        padding-top: 10px;
    }
    // :deep(.van-tabs) {
    //     [class~="van-tabs__wrap"] {
    //         padding-bottom: 5px;
    //         border-bottom: 1px solid #eee;
    //     }
    //     [class~="van-tab--active"] {
    //         font-weight: 600;
    //     }
    // }
    .expect {
        width: 100%;
        height: 240px;
        position: relative;

        img {
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translate(-50%, -50%);
            width: 189px;
            height: auto;
        }
    }
}
:deep(.frame-cell) {
    span {
        padding-right: 20px;
    }
}
</style>
